<!DOCTYPE html>

<html>

    <head>
        <title>PageDown Demo Page</title>
        
        <link rel="stylesheet" type="text/css" href="demo.css" />
        <link href="prettify.css" type="text/css" rel="stylesheet" />
        
        <script type="text/javascript" src="../pagedown/Markdown.Converter.js"></script>
        <script type="text/javascript" src="../pagedown/Markdown.Sanitizer.js"></script>
        <script type="text/javascript" src="../pagedown/Markdown.Editor.js"></script>
        <script type="text/javascript" src="prettify.js"></script>       <script type="text/javascript" src="../Markdown.Extra.js"></script>
    </head>
    
    <body onload="prettyPrint()">
        <div class="wmd-panel">
            <div id="wmd-button-bar"></div>
            <textarea class="wmd-input" id="wmd-input">
This is the *first* editor.
------------------------------

Just plain **Markdown**, except that the input is sanitized:

<marquee>I'm the ghost from the past!</marquee>

# Markdown Extra

## Tables 

| Item             | Value |
| ---------------- | -----:|
| Air Conditioner  | $1600 |
| <del>Phone</del> |   $12 |
| *Pipe*           |    $1 |

I've added just some basic borders and padding. Notice that span-level tags will
still be rendered inside of the table. Also, you can specify a class for the generated
tables using `Markdown.Extra.init(converter, {table_class: "table table-striped"})` for instance.

## Fenced Code Blocks

```javascript
var foo = "bar";
```

You can also specify options. Markdown.Extra was given the following options
for this editor.

```javascript
  Markdown.Extra.init(converter1, {
    extensions: "all",
    highlighter: "prettify"
  });
```



</textarea>
        </div>
        <div id="wmd-preview" class="wmd-panel wmd-preview"></div>
        
        <br /> <br />
        
        <div class="wmd-panel">
            <div id="wmd-button-bar-second"></div>
            <textarea class="wmd-input" id="wmd-input-second">
This is the *second* editor.
------------------------------

It has a plugin hook registered that surrounds all words starting with the
letter A with asterisks before doing the Markdown conversion. Another one gives bare links
a nicer link text. User input isn't sanitized here:

<marquee>I'm the ghost from the past!</marquee>

# Markdown Extra

## Tables 

| Item             | Value |
| ---------------- | -----:|
| Air Conditioner  | $1600 |
| <del>Phone</del> |   $12 |
| *Pipe*           |    $1 |

I've added just some basic borders and padding. Notice that span-level tags will
still be rendered inside of the table. Also, you can specify a class for the generated
tables using `Markdown.Extra.init({table_class: "table table-striped"})` for instance.

Take a look at the source and you'll see that the tables
plugin is last in the chain. Otherwise, the `Air` in `Air Conditioner` would render
as raw markdown instead of being emphasized.

## Fenced Code Blocks

```javascript
var foo = "bar";
```

You can also specify additional options. Markdown.Extra was given the following options
for this editor.

```javascript
  Markdown.Extra.init(converter2, {
    extensions: "all",
    highlighter: "prettify"
  });
```

(asterisks around "all" are from the preConversion hook)
</textarea>
        </div>
        <div id="wmd-preview-second" class="wmd-panel wmd-preview"></div>

        <script type="text/javascript">
            (function () {

                var converter1 = Markdown.getSanitizingConverter();
                Markdown.Extra.init(converter1, {
                  extensions: "all",
                  highlighter: "prettify"
                });

                var editor1 = new Markdown.Editor(converter1);
                editor1.hooks.chain("onPreviewRefresh", prettyPrint); // google code prettify
                editor1.run();
                
                var converter2 = new Markdown.Converter();

                converter2.hooks.chain("preConversion", function (text) {
                    return text.replace(/\b(a\w*)/gi, "*$1*");
                });
                converter2.hooks.chain("plainLinkText", function (url) {
                    return "This is a link to " + url.replace(/^https?:\/\//, "");
                });
                
                // "all" is the default
                Markdown.Extra.init(converter2, {highlighter: "prettify"});

                var help = function () { alert("Do you need help?"); }
                var options = {
                    helpButton: { handler: help },
                    strings: { quoteexample: "whatever you're quoting, put it right here" }
                };
                var editor2 = new Markdown.Editor(converter2, "-second", options);
                editor2.hooks.chain("onPreviewRefresh", prettyPrint); // google code prettify
                
                editor2.run();
            })();
        </script>
    </body>
</html>
